<template>
  <div id="inner">
    <ul class="innerList" v-for="(item, i) in data" :key="i">
      <i @click="change()" class="el-icon-circle-close"></i>
      <li class="InList">
        <!-- <img class="innerImg" :src="item.course.imgUrl" alt="" /> -->
        <img class="innerImg" :src="img" alt="" />
        <!-- <p class="innerp1">{{ item.title }}</p>
        <p class="innerp2">
          {{ item.m1 }} <span>{{ item.m2 }}</span>
        </p>

        <p class="innerp3">￥{{ item.price }}</p>

        <p class="innerp4">
          <img :src="item.img2" alt="" />
          <span>{{ item.avatorname }}</span>
        </p> -->
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: Array | Object,
    // id:String
  },
  methods: {
    change() {
      let id = this.id
      this.$emit("abc", id);
    },
  },
  data() {
    return {
      img:''
    };
  },
  created() {
    this.img = this.data.course.imgUrl
  },
};
</script>

<style scoped lang="scss">
#inner {
  border: 0.2vw solid #ccc;
  position: relative;
  margin-bottom: 1vh;

  > .innerList {
    margin: 1vh;
    > .el-icon-circle-close {
      position: absolute;
      top: 0;
      right: 0;
      border-radius: 50%;
      font-size: 50px;
      color: #999;
    }
    .InList {
      // margin-bottom: 3vh;
      overflow: hidden;
      > .innerImg {
        width: 50vw;
      }
      > .innerp1 {
        font-size: 4vw;
        font-weight: bold;
        height: 5vh;
        line-height: 5vh;
      }
      > .innerp2 {
        height: 6vh;
        line-height: 6vh;
        color: #999;
        > span {
          padding-left: 2vw;
        }
      }
      > .innerp3 {
        margin-top: 0.5vh;
        float: right;
        color: orange;
      }
      > .innerp4 {
        > img {
          width: 6vw;
          // height: 3vh;
          vertical-align: middle;
          border-radius: 50%;
          margin-right: 0.4vw;
        }
        > span {
          font-size: 18px;
          display: inline-block;
          width: 14vw;
        }
      }
      > img {
        margin-right: 3vw;
        height: 15vh;
        float: left;
      }
      > .Listinner {
        width: 5vw;
        height: 5vh;
      }
    }
  }
}
</style>